<!--  -->
<template>
  <div class='goodsAlbum-page' :class="className">
    <div v-html="css"></div>
    <div class="goodsAlbum-main">
      <div class="goodsAlbum-list" v-if="albumList.length > 0">
        <div class="goodsAlbum-item" v-for="(item,index) in albumList" :key="index">
          <div class="album-wrap flex" @click.stop="albumNav(item.id)">
            <div class="img">
              <van-image
                width="100px"
                height="75px"
                radius="4px"
                :src="item.covers[0] && item.covers[0].src"
              />
            </div>
            <div class="wrap-right flex-j-sb">
              <h3>{{item.name}}</h3>
              <p class="pl">{{item.describe}}</p>
            </div>
          </div>
          <div class="goods-board flex" @click.stop="albumNav(item.id)" v-show="datas.statistics_is_show">
            <div class="board-item">
              <h3>{{item.product_count}}</h3>
              <h4>商品数量</h4>
            </div>
            <div class="board-item">
              <h3>{{item.sales}}</h3>
              <h4>累计销量</h4>
            </div>
            <div class="board-item">
              <h3>{{item.browse_count}}</h3>
              <h4>累计访问</h4>
            </div>
          </div>
            <div  ref="handpickList" class="activity-list flex"  v-if="item.has_many_relation_product.length > 0 ">
              <ul class="flex activity-scroll flex-a-c ">
                <li class="activity-item flex flex-j-c" v-for="(goodsItem, goodsIndex) in item.has_many_relation_product" :key="goodsIndex" @click="classifyOn(goodsItem.id)">
                  <van-image
                    width="76px"
                    height="76px"
                    radius="4px"
                    :src="goodsItem.thumb"
                  />
                  <h3 class="pl">{{ goodsItem.title }}</h3>
                  <p class="price">￥{{ goodsItem.price }}</p>
                </li>
              </ul>
              <div class="iconfont-more flex-a-c flex"   v-if="item.has_many_relation_product.length == 10" @click.stop="albumNav(item.id)">更多<span class="iconfont icon-icon_more11"></span></div>
            </div>
        </div>
      </div>
      <van-empty description="暂无数据" v-else/>
      <div class="loadMore" v-if="isLoadMore" @click="getMoreData">加载更多</div>
      <div class="loadMore" v-if="isLoadMoreSet" @click="getMoreDataAll">加载更多</div>
      <div class="loadMore" v-if="lastIndex == index && (page >= total_page)">{{ $i18n.t("没有更多了") }}~~</div>
    </div>
    
  </div>
</template>

<script>
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
//例如：import 《组件名称》 from '《组件路径》';
import { Image as VanImage } from 'vant';
  const css = function() {
    if (this.datas.preview_color) {
      // 确保数据已传入
      let datas = this.plugin_active && this.openTemplate == 1 ? this.datas_style02 : this.datas;
      const { mode_color, preview_color, album_name_color,desc_color,statistics_bg_color,statistics_color,statistics_number_color } = datas;
      return `
          .component-${this.id}  .goodsAlbum-main {
              background: ${preview_color};
          }
          .component-${this.id}  .goodsAlbum-list .goodsAlbum-item {
              background: ${mode_color};
          }
          .component-${this.id} .goodsAlbum-list .goodsAlbum-item .album-wrap .wrap-right h3 {
              color: ${album_name_color};
          }
          .component-${this.id} .goodsAlbum-list .goodsAlbum-item .album-wrap .wrap-right p {
              color: ${desc_color};
          }
          .component-${this.id}  .goodsAlbum-list .goodsAlbum-item .goods-board {
              background: ${statistics_bg_color};
          }
          .component-${this.id}  .goodsAlbum-list .goodsAlbum-item .goods-board h3{
              color: ${statistics_number_color};
          }
          .component-${this.id} .goodsAlbum-list .goodsAlbum-item .goods-board h4{
            color: ${statistics_color};
          }
      `;
    }
  };
  export default {
  name:'',
  //import引入的组件需要注入到对象中才能使用
  components: {
    VanImage
  },
  props: ["id","page_id", "datas","lastIndex","index","component_key","isBottom","tabcontrol", "isLast"],
  data() {
  return {
    page:1,
    arrIndex: 1, //组件加载下一页
    per_page:15, //每页多少条数据
    storeScroll:'',
    isLoadMore: true,
    isLoadMoreSet:false,
    allLoaded: false, //全部数据加载完成
    total_page:0,
    locationMore:true,
    albumUnList:[]
  };
  },
  //监听属性 类似于data概念
  computed: {
    css() {
      return "<style>" + css.call(this) + "</style>";
    },
    className() {
      const name = ["component-wrapper", `component-${this.id}`];
      return name;
    },
    albumList() {
      return this.datas.list.data || this.datas.list;
    }
  },
  //监控data中的数据变化
  watch: {
    isBottom: function(newVal, oldVal) {
      if (this.tabcontrol) {
        // 选项卡this.isLast判断商品列表是最后一个组件
        if (newVal && this.isLast && this.isLoadMore) {
          this.getMoreData();
        } else if (this.page >= this.total_page) {
          this.getMoreDataAll();
        }
      }
      // this.lastIndex == this.index判断商品列表是最后一个组件
      if (newVal && this.lastIndex == this.index && this.isLoadMore) {
        this.getMoreData();
      } else if (this.page >= this.total_page) {
        this.getMoreDataAll();
      }
    }
  },
  //方法集合
  methods: {
    albumNav(id) {
      this.$router.push(this.fun.getUrl("bountique_album", {}, {album_id: id}));
    },
    classifyOn(id) {
      this.$router.push(this.fun.getUrl("goods",{id: id}, {}));
    },
    getMoreDataAll() { //处理后台一次性给多量数据分页
      if (this.albumUnList.slice(this.per_page * this.arrIndex).length > 0) {
        this.datas.list = this.datas.list.concat(this.albumUnList.slice(this.per_page * this.arrIndex, this.per_page * (this.arrIndex + 1))); //数组拼接
        this.arrIndex = this.arrIndex + 1;
        if(this.albumUnList.length === this.datas.list.length) {
          this.isLoadMoreSet = false;
        }
      }
    },
    setListData() { //处理列表数据是自动获取还是手动获取
      if(this.datas?.list?.data && this.datas.get_style == "1") {
        this.total_page = this.datas.list.last_page;
        if(this.total_page <= this.page) {
          this.isLoadMore = false;
        }
        if(this.datas.list.data.length > this.datas.get_number) { //大于后台控制的数量就显示后台数量列表
          this.datas.list.data.splice(this.datas.get_number,this.datas.list.data.length-this.datas.get_number);
          this.isLoadMore = false;
        }
      }else {
        if(this.datas.list.length <= 0) {
          this.isLoadMore = false;
        }
      }
      if(this.datas.get_style == "2") {
        this.albumUnList = this.datas.list;
        this.datas.list = this.datas.list.slice(0, 15);
        this.isLoadMore = false;
        if(this.albumUnList.length > this.per_page) {
          this.isLoadMoreSet = true;
        }
      }
    },
    _initScrollCart() {
      if(!this.storeScroll) {
        console.log(this.$refs.handpickList);
        this.storeScroll = new BScroll(this.$refs.handpickList, {
          click: true,
          scrollY: true
        });
      }
    },
    // 获取更多数据
    getMoreData() {
      this.isLoadMore = false;
      if (this.page >= this.total_page) {
        return;
      } else {
        this.page = this.page + 1;
        let json = {
          page:this.page,
          decorate_id: this.page_id || this.$store.state.temp.item.id,
          component_id: this.id,
          component_key: 'U_productAlbum'
        }
        $http
        .post(
          "home-page.get-decorate-page",
          json,'loading')
        .then((response)=> {
          this.isLoadMore = true;
          if (response.result === 1) {
            let res = response.data;
            let list = res?.data;
            this.datas.list.data =this.datas.list.data.concat(list);//数组拼接
            if(this.datas.get_style == "1") { //装修自动获取
              if(this.datas.list.data.length > this.datas.get_number) {
                this.datas.list.data.splice(this.datas.get_number, this.datas.list.data.length-this.datas.get_number);
                this.isLoadMore = false;
              }
            }
            if(this.page >= this.total_page) {
              this.isLoadMore = false;
            }
          } else {
            this.page = this.page - 1;
            this.isLoadMore = false;
          }
        },
        function(response) {
          console.error(response);
          // error callback
        });
      }
    },
  },
  //生命周期 - 创建完成（可以访问当前this实例）
  created() {

  },
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {
    this.setListData();
  },
  beforeCreate() {}, //生命周期 - 创建之前
  beforeMount() {}, //生命周期 - 挂载之前
  beforeUpdate() {}, //生命周期 - 更新之前
  updated() {}, //生命周期 - 更新之后
  beforeDestroy() {}, //生命周期 - 销毁之前
  destroyed() {}, //生命周期 - 销毁完成
  activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
  }
</script>
<style lang="scss" scoped>
  .loadMore {
    width: 100%;
    height: 3.125rem;
    cursor: pointer;
    line-height: 3.125rem;
    text-align: center;
    clear: both;
  }
  .iconfont-more {
    flex:2;
    min-width: 3.125rem;
    padding:0 0 0 0.25rem;
    // background-color: #fff;
  }
  .icon-icon_more11 {
    font-size: 0.875rem;
  }
  .activity-scroll {
    overflow-x: scroll;
  }
  .pl {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
/* @import url(); 引入公共css类 */
  .goodsAlbum-list {
    padding:0.625rem;
    .goodsAlbum-item {
      background-color: #fff;
      border-radius: 0.625rem;
      padding:0.625rem;
      margin:0 0 0.625rem 0;
      .album-wrap {
        width:100%;
        box-sizing: border-box;
        .img {
          height: 4.6875rem;
        }
        .wrap-right {
          padding:0 0 0 0.625rem;
          flex-direction: column;
          justify-content:space-around;
          text-align: left;
          overflow: hidden;
          h3 {
            font-size: 1rem;
            font-weight: 500;
            line-height: 1.125rem;
            color: #3B3B4A;
          }
          p {
            // word-break:break-all;
            // word-wrap:break-word;
            font-size: 0.8125rem;
            font-weight: 400;
            color: #AAAAB3;
          }
        }
      }
      .goods-board {
        background: rgba(241,83,83,0.39);
        border-radius: 0.25rem;
        margin: 0.625rem 0 0  0;
        .board-item {
          padding:0.625rem 0;
          flex: 0 0 33%;
          h3 {
            font-size: 1rem;
            line-height: 1.125rem;
            font-weight: 400;
            color: #F15353;
          }
          h4 {
            font-size: 0.75rem;
            font-weight: 400;
            color: #6E6E79;
          }
        }
      }
      .activity-list {
        margin:0.625rem 0 0 0;
        position: relative;
        .activity-scroll {
          .activity-item {
            width:4.75rem;
            flex-direction: column;
            margin:0 0.625rem 0 0;
            text-align: left;
            h3 {
              padding:0.3125rem 0;
              font-size: 0.875rem;
              font-weight: 400;
              color: #3B3B4A;
            }
            .price {
              font-size: 0.875rem;
              color: #F15353;
            }
          }
        }
      }
    }
  }
</style>